<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .two{
            background-color: green;
            opacity: 0.5;
            top: 0;
            bottom: 0;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 9;

        }
        .one{
            z-index: 10;
        }
        .inputs{
            opacity: 0.5;
            position: fixed;
            z-index: 11;
            width: 600px;
            height: 400px;
            left:  50%;
            right: 50%;
            top: 50%;
            bottom: 50%;
            background-color: #9acfea;
            margin-left: -200px;


        }
    </style>
</head>
<body>
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v1 %}#}
{#        <li>主机名:{{ i.name }} IP: {{ i.ip }} 端口: {{ i.port }}业务：{{ i.business.code }}-{{ i.business.caption }} 薪水{{ i.business.dollars.salary }} </li>#}
{#    {% endfor %}#}
{#    </ul>#}
{##}
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v2 %}#}
{#        <li>主机名:{{ i.name }} IP: {{ i.ip }} 端口: {{ i.port }}业务：{{ i.business__code }}-{{ i.business__caption}} </li>#}
{#    {% endfor %}#}
{#    </ul>#}
{##}
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v3 %}#}
{#        <li>主机名:{{ i.0 }} IP: {{ i.1 }} 端口: {{ i.2 }}业务：{{ i.3 }}-{{ i.4 }} </li>#}
{#    {% endfor %}#}
{#    </ul>#}

    <div id="one" class="one">
        <table border="1">
            <thead>
            <tr>
                <td>序号</td>
                <td>主机名</td>
                <td>IP</td>
                <td>端口</td>
                <td>业务线名称</td>
            </tr>

            </thead>

            <tbody>
                {% for row in v1 %}
                    <tr>
                        <td>{{ forloop.counter0 }}</td> <!--循环的计数器,counter0 从0开始-->
                        <td>{{ row.name }}</td>
                        <td>{{ row.ip }}</td>
                        <td>{{ row.port }}</td>
                        <td>{{ row.business.caption }}</td>

                    </tr>
                {% endfor %}
            </tbody>

        </table>
        <input id="addinfo" type="button" value="添加"/>

    </div>
    <div id="two" class="two hide"></div>
    <div id="inputs" class="inputs hide">
        <form method="POST" action="/host/index/" >
            主机名：<input id="host" type="text" name="host"/ ><br>
            IP   ：<input id="ip" type="text" name="ip" /><br>
            端  口：<input id="port" type="text" name="port" /><br>
            业务部门:
            <select id="department" name="department">
                {% for op in bussin_info %}
                    <option value="{{ op.bid }}">{{ op.caption }}</option>
                {% endfor %}
            </select><br>
            <span id="text"></span>
            <input type="submit" value="提交">
            <input id="ajax_submit" type="button" value="Ajax提交">

        </form>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('#addinfo').click(function () {
                $("#two").removeClass('hide');
                $("#inputs").removeClass('hide');

            })
        });
        $('#ajax_submit').click(function () {
            $.ajax({
            type:'POST',
            url:'/host/index/',
            data:{'department':$('#department').val(),'port':$('#port').val(),'host':$('#host').val(),'ip':$('#ip').val()},
            success: function (data) {
                var obj = JSON.parse(data)

                if (obj.status){
                    location.reload();
                }else{
                    $('#text').text(obj.error_msg)
                }
            }
            })
        });




    </script>
</body>
</html>